<template>
  <el-card
    shadow="always"
    style="margin: 2px 5px"
    :body-style="{
      padding: '20px',
      height: 'calc(100vh - 170px)',
      'overflow-y': 'auto',
    }"
  >
    <template #header>
      <el-row>
        <el-col :span="6" :offset="0">
          <el-radio-group v-model="filterRead" size="default">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="已读" />
            <el-radio-button label="未读" />
          </el-radio-group>
        </el-col>
        <el-col :span="16" :offset="2">
          <el-button-group style="float: right">
            <el-button
              type="danger"
              size="default"
              @click="deleteSelected"
              :icon="Delete"
              :disabled="selectedNotices.length === 0"
              >删除选中</el-button
            >
            <el-button
              type="danger"
              size="default"
              @click="deleteAll"
              :icon="Delete"
              >全部删除</el-button
            >
            <el-button
              type="primary"
              size="default"
              :icon="Select"
              @click="updateSelected"
              :disabled="selectedNotices.length === 0"
              >选中标为已读</el-button
            >
            <el-button
              type="primary"
              size="default"
              :icon="Select"
              @click="updateAll"
              >全部标为已读</el-button
            >
          </el-button-group>
        </el-col>
      </el-row>
    </template>

    <el-table
      :data="showNoticesList"
      border
      stripe
      @row-click="markRead"
      @selection-change="handleSelectionChange"
      max-height="800"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="标题" min-width="120px">
        <template #default="{ row }">
          <el-badge :is-dot="!row.isRead" :hidden="false" type="danger">
            <span>{{ row.title }}</span>
          </el-badge>
        </template>
      </el-table-column>
      <el-table-column label="详细说明" prop="notice" min-width="300px" />
      <el-table-column label="时间" prop="time" min-width="120px" />
    </el-table>

    <el-pagination
      style="margin-top: 10px"
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50]"
      layout="total,prev,sizes, pager, next,jumper"
      :total="filteredNoticesList.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";
import { useSunnyNoticeStore } from "@/stores/NoticeStore";
import type { SunnyNotice } from "@/types/sunnyNotice/type";
import {
  updateNoticesApi,
  deleteNoticesApi,
  updateAllNoticesApi,
  deleteAllNoticesApi,
} from "@/api/sunnyNotice";
import { Delete, Select } from "@element-plus/icons-vue";

const noticeStore = useSunnyNoticeStore();

onMounted(() => {
  noticeStore.listNotices();
});

//类型过滤
const filterRead = ref("all");

//过滤之后的列表
//过滤条件：
let filteredNoticesList = computed(() => {
  return noticeStore.noticeList.filter((notice) => {
    //当filterRead是all的时候，返回所有
    if (filterRead.value === "all") {
      return true;
    }
    //是已读的时候，返回read为ture的
    else if (filterRead.value === "已读") {
      return notice.isRead;
    } else {
      //是未读的时候，返回read为false的
      return !notice.isRead;
    }
  });
});

//分页功能
const currentPage = ref(1);
const pageSize = ref(10);
function handleSizeChange(size: number) {
  pageSize.value = size;
}

const handleCurrentChange = (cp: number) => {
  currentPage.value = cp;
};

const showNoticesList = computed(() => {
  //分页实际上就是算出来当前列表中，下标为多少范围的数据需要展示
  //第1页   下标0-9  第2页 10-19    // 20页第1页   下标 0-19
  let startIndex = (currentPage.value - 1) * pageSize.value;
  let endIndex = currentPage.value * pageSize.value - 1;

  let index = -1;
  let currentPageData = filteredNoticesList.value.filter(() => {
    index += 1;
    return index <= endIndex && index >= startIndex;
  });
  return currentPageData;
});

//点击标记一行已读
function markRead(row: SunnyNotice) {
  row.isRead = true;
  let updateRows: SunnyNotice[] = [row];
  updateNoticesApi(updateRows);
}

//存储选中的数据
const selectedNotices = ref<SunnyNotice[]>([]);

const selectedIds = computed(() => {
  return selectedNotices.value.map((notice) => notice.id);
});

//获取选中的数据
function handleSelectionChange(selection: SunnyNotice[]) {
  selectedNotices.value = selection;
}

function deleteSelected() {
  //删除选中的id对应的消息，并且重新获取消息
  deleteNoticesApi(selectedIds.value.toString()).then(() => {
    noticeStore.listNotices();
  });
}

function updateSelected() {
  //在前端修改数据然后再提交到后端，那就不用重新从后端拉取所有的数据了
  selectedNotices.value.forEach((notice) => {
    notice.isRead = true;
  });
  updateNoticesApi(selectedNotices.value);
}

function updateAll() {
  //全部更新在后端直接处理，前端数据不会变化，所以重新拉取一下数据刷新前端页面。
  updateAllNoticesApi().then(() => {
    noticeStore.listNotices();
  });
}

function deleteAll() {
  deleteAllNoticesApi().then(() => {
    noticeStore.listNotices();
  });
}
</script>

<style scoped>
:deep(.el-badge__content) {
  top: 3px;
  right: 0 !important;
}
</style>
